<template>
  <div class="portscan-container">
    <!-- 扫描配置 -->
    <el-card class="scan-config">
      <div slot="header" class="card-header">
        <span class="card-title">
          <i class="el-icon-aim"></i>
          端口扫描配置
        </span>
      </div>
      <el-form :model="scanForm" label-width="120px">
        <el-form-item label="目标主机">
          <el-input v-model="scanForm.host" placeholder="请输入目标主机IP"></el-input>
        </el-form-item>
        <el-form-item label="端口范围">
          <el-row :gutter="20">
            <el-col :span="11">
              <div class="port-input">
                <div class="port-label">起始端口</div>
                <el-input-number 
                  v-model="scanForm.startPort"
                  :min="1"
                  :max="65535"
                  :controls="false"
                  placeholder="请输入起始端口"
                  class="port-number-input">
                </el-input-number>
                <div class="port-tip">范围：1-65535</div>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="port-input">
                <div class="port-label">结束端口</div>
                <el-input-number 
                  v-model="scanForm.endPort"
                  :min="1"
                  :max="65535"
                  :controls="false"
                  placeholder="请输入结束端口"
                  class="port-number-input">
                </el-input-number>
                <div class="port-tip">范围：1-65535</div>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="超时时间">
          <el-input-number 
            v-model="scanForm.timeout" 
            :min="1" 
            :step="1" 
            placeholder="超时时间(秒)">
          </el-input-number>
          <span class="timeout-tip">默认10秒，建议不小于1秒</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="startScan" :loading="scanning">
            <i class="el-icon-video-play"></i>
            开始扫描
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 扫描结果 -->
    <el-card class="scan-results" v-if="scanResults">
      <div slot="header" class="card-header">
        <span class="card-title">
          <i class="el-icon-data-analysis"></i>
          扫描结果
        </span>
      </div>
      
      <!-- 扫描概览 -->
      <div class="scan-overview">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="overview-item">
              <div class="item-title">目标主机</div>
              <div class="item-value">
                <el-tag type="info">
                  <i class="el-icon-monitor"></i>
                  {{ scanResults.host }}
                </el-tag>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="overview-item">
              <div class="item-title">扫描范围</div>
              <div class="item-value">
                <el-tag type="warning">
                  <i class="el-icon-connection"></i>
                  {{ scanResults.scanned_range[0] }} - {{ scanResults.scanned_range[1] }}
                </el-tag>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="overview-item">
              <div class="item-title">超时设置</div>
              <div class="item-value">
                <el-tag type="success">
                  <i class="el-icon-timer"></i>
                  {{ scanResults.timeout }}s
                </el-tag>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 端口状态统计 -->
      <div class="port-stats">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="stats-card open-ports">
              <div class="stats-title">
                <i class="el-icon-success"></i>
                开放端口
              </div>
              <div class="stats-value">{{ scanResults.open_ports.length }}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="stats-card closed-ports">
              <div class="stats-title">
                <i class="el-icon-error"></i>
                关闭端口
              </div>
              <div class="stats-value">{{ scanResults.closed_ports_count }}</div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 端口详情 -->
      <div class="port-details">
        <el-tabs type="border-card">
          <el-tab-pane label="开放端口">
            <el-table :data="scanResults.open_ports" style="width: 100%">
              <el-table-column prop="port" label="端口" width="120">
                <template slot-scope="scope">
                  <el-tag type="success">
                    <i class="el-icon-connection"></i>
                    {{ scope.row.port }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="service" label="服务">
                <template slot-scope="scope">
                  <el-tag type="info">
                    <i class="el-icon-service"></i>
                    {{ scope.row.service }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="所有端口">
            <el-table :data="scanResults.results" style="width: 100%">
              <el-table-column prop="port" label="端口" width="120">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.status === 'open' ? 'success' : 'info'">
                    <i class="el-icon-connection"></i>
                    {{ scope.row.port }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="120">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.status === 'open' ? 'success' : 'danger'">
                    <i :class="scope.row.status === 'open' ? 'el-icon-success' : 'el-icon-error'"></i>
                    {{ scope.row.status === 'open' ? '开放' : '关闭' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="service" label="服务">
                <template slot-scope="scope">
                  <el-tag type="info">
                    <i class="el-icon-service"></i>
                    {{ scope.row.service }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import { portScan } from '@/api/opration'

export default {
  name: 'PortScan',
  data() {
    return {
      scanForm: {
        host: '127.0.0.1',
        startPort: 20,
        endPort: 1024,
        timeout: 10 // 默认设置为10秒
      },
      scanning: false,
      scanResults: null
    }
  },
  methods: {
    async startScan() {
      this.scanning = true
      try {
        const response = await portScan({
          start_port: this.scanForm.startPort,
          end_port: this.scanForm.endPort,
          host: this.scanForm.host,
          timeout: this.scanForm.timeout * 1000 // 转换为毫秒
        })
        if (response) {
          this.scanResults = response
          this.$message.success('扫描完成')
        } else {
          this.$message.error('扫描失败')
        }
      } catch (error) {
        console.error('扫描失败:', error)
        this.$message.error('扫描失败')
      } finally {
        this.scanning = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.portscan-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);

  .el-card {
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .card-header {
      display: flex;
      align-items: center;
      .card-title {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
        display: flex;
        align-items: center;
        i {
          margin-right: 8px;
          font-size: 18px;
          color: #409EFF;
        }
      }
    }
  }

  .scan-overview {
    margin-bottom: 20px;
    .overview-item {
      text-align: center;
      padding: 15px;
      background-color: #f8f9fb;
      border-radius: 4px;
      
      .item-title {
        font-size: 14px;
        color: #606266;
        margin-bottom: 10px;
      }
      
      .item-value {
        .el-tag {
          display: inline-flex;
          align-items: center;
          i {
            margin-right: 5px;
          }
        }
      }
    }
  }

  .port-stats {
    margin-bottom: 20px;
    .stats-card {
      padding: 20px;
      border-radius: 4px;
      text-align: center;
      
      &.open-ports {
        background-color: #f0f9eb;
        .stats-title {
          color: #67C23A;
        }
      }
      
      &.closed-ports {
        background-color: #fef0f0;
        .stats-title {
          color: #F56C6C;
        }
      }
      
      .stats-title {
        font-size: 14px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        i {
          margin-right: 5px;
        }
      }
      
      .stats-value {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
      }
    }
  }

  .port-details {
    ::v-deep .el-tabs__content {
      padding: 20px;
    }

    .el-table {
      .el-tag {
        display: inline-flex;
        align-items: center;
        i {
          margin-right: 5px;
        }
      }
    }
  }

  .text-center {
    text-align: center;
    line-height: 32px;
  }

  .port-input {
    background-color: #f8f9fb;
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;

    &:hover {
      background-color: #f0f2f5;
    }

    .port-label {
      font-size: 14px;
      color: #606266;
      margin-bottom: 12px;
      font-weight: 500;
      text-align: center;
    }

    .port-number-input {
      width: 100%;
      
      ::v-deep .el-input__inner {
        text-align: center;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        transition: all 0.3s;

        &:hover {
          border-color: #c0c4cc;
        }

        &:focus {
          border-color: #409EFF;
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }
      }
    }

    .port-tip {
      font-size: 12px;
      color: #909399;
      margin-top: 8px;
      text-align: center;
    }
  }

  .port-separator {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #909399;
    font-size: 14px;
  }

  .timeout-tip {
    margin-left: 10px;
    font-size: 12px;
    color: #909399;
  }
}
</style>
